<template>

用户姓名:<input type="text" placeholder="请输入用户名"  v-model="MemberName"/>
性别:<select v-model="MemberSex">
    <option :value="0">--请选择--</option>
    <option :value="1">男</option>
    <option :value="2">女</option>
</select>

<input type="button" value="查询" @click="LoadData"/>

<h2>会员显示</h2>
<table border="1">
    <tr>
        <td colspan="2" style=":text-align: center;"></td>
    </tr>
    <thead>
        <tr style="background-color: aqua;">
            <td>用户名</td>
            <td>真实姓名</td>
            <td>手机号</td>
            <td>出生日期</td>
            <td>性别</td>
            <td>积分余额</td>
            <td>金额</td>
            <td>数据状态</td>
            <td>会员类型名称</td>
            <td>操作</td>
        </tr>
    </thead>
<tbody>
    <tr  v-for="item in info ">
            <td>{{item.M_Name  }}</td>
            <td>{{item.M_Truename}}</td>
            <td>{{item.M_Phone}}</td>
            <td>{{item.M_Birthday.substring(0,10)}}</td>
            <td>{{item.M_Sex==true?"男":"女"}}</td>
            <td>{{item.M_Integral}}</td>
            <td>{{item.M_Money}}</td>
            <td>{{item.M_State==true?"启用":"禁用"}}</td>
            <td>{{item.MT_Name}}</td>
            <td>操作</td>
        </tr>
</tbody>

</table>

</template>
<script setup lang="ts">
import {onMounted,ref}from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

import{useMemberStore}from '../../store/index.ts'

const router=useRouter();

//创建仓库实例
const MemberStore=useMemberStore();

if(MemberStore.MemberName==""){
    router.push("/Login");
}

//创建路由对象实例


//生命参数
const MemberName=ref("");
const MemberSex=ref(0);



//创建响应式数据
const info=ref ([{
    M_Name:"",
    M_Truename:"",
   
    M_Phone:"",
    M_Birthday:"",
   
    
    M_Sex:true,
    M_Integral:"",
    M_Money:"",
    M_State:true,
    MT_Name:"",


}])

//创建生命周期钩子

onMounted(()=>{
    LoadData();
})

const LoadData=()=>{
axios.get('https://localhost:7153/api/Member/ShowMember/ShowMember',
{
    params:{
        Mname:MemberName.value,
        Sex:MemberSex.value
    }
}
)
 .then(res=>{
   
        info.value=res.data;


 })

}


</script>